<script lang="ts" setup>
import { getClassifyApi } from '@/api/index'
import CustomNavBar from '@/components/CustomNavBar.vue'
import { useWallStore } from '@/store'
import { timeAgo } from '@/utils/utils'

definePage({
  style: {
    navigationBarTitleText: '分类',
    navigationStyle: 'custom',
  },
})

let classify = reactive([])
let classifyParams = reactive({ pageSize: 9, pageNum: 1 })
let loading = ref(false)
let noMore = ref(false)
const windowHeight = ref(0)
const showBackTop = ref(false) // 控制返回顶部按钮的显示
async function getClassify() {
  if (loading.value || noMore.value)
    return
  loading.value = true
  try {
    let data = await getClassifyApi(classifyParams)
    if (data.length < classifyParams.pageSize) {
      noMore.value = true
    }
    classify.push(...data)
    classifyParams.pageNum++
  }
  catch (e) {
    console.error(e)
  }
  finally {
    loading.value = false
  }
}
function scrollToTop(flag: boolean) {
  // 滚动到顶部的逻辑
  if (flag) {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    })
    showBackTop.value = !showBackTop.value
  }
}
//
function onRefresh() {
  // 重置状态
  classify.length = 0
  classifyParams.pageNum = 1
  noMore.value = false
  loading.value = false
  getClassify()
}

onLoad(() => {
  // 获取屏幕高度
  uni.getSystemInfo({
    success: (res) => {
      windowHeight.value = res.windowHeight
    },
  })

  getClassify()
})
function goClassList(item) {
  useWallStore().classificationName = item.name

  uni.navigateTo({
    url: `/pages/classList/classList?classid=${item._id}`,
  })
}
onReachBottom(() => {
  getClassify()
})
// 监听页面滚动，动态控制下拉刷新的启用/禁用
onPageScroll((e) => {
  // 滚动超过一个屏幕高度时显示返回顶部按钮
  if (e.scrollTop > windowHeight.value) {
    showBackTop.value = true
  }
  else {
    showBackTop.value = false
  }
})
// #ifndef H5
onShareAppMessage((e) => {
  // 分享给好友

  return {
    title: '花朵壁纸-好友',
    path: '/pages/index/index',
  }
})
// 分享朋友圈
onShareTimeline(() => {
  return {
    title: '花朵壁纸-朋友圈',
    imageUrl: '/static/images/flower.png', // 1比1
  }
})
// #endif
</script>

<template>
  <view class="classification">
    <CustomNavBar title="分类" />
    <uv-row justify="space-center" custom-style="margin:10px">
      <uv-col span="12">
        <view class="relative grid grid-cols-3 gap-3">
          <view
            v-for="(item, index) in classify" :key="item._id"
            :class="{ 'last-grid-item': index === classify.length - 1 }"
            class="relative h-33vh w-28vw overflow-hidden rounded-8px"
            @click="goClassList(item)"
          >
            <uv-image :src="item.picurl" width="28vw" height="430" :observe-lazy-load="true" key-name="picurl">
              <template #loading>
                <uv-loading-icon color="green" />
              </template>
            </uv-image>

            <view
              class="last-mark grid-box-overlay absolute bottom-0 h-30px w-28vw flex items-center justify-center rounded-b-8px bg-black bg-opacity-40"
            >
              <text class="text-16px text-white">{{ item.name }}</text>
            </view>
            <view
              class="last-mark grid-box-overlay absolute top-0 h-20px flex items-center justify-center rounded-br-4px bg-#2fde72 bg-opacity-40 px-8px"
            >
              <text class="text-12px text-white">{{ timeAgo(item.updateTime) }}</text>
            </view>
          </view>
        </view>
        <!-- 底部提示信息 -->
        <view class="py-20px text-center">
          <text v-if="loading" class="text-gray-500">加载中...</text>
          <text v-else-if="noMore" class="text-gray-500">没有更多数据了</text>
          <!-- <text v-else class="text-gray-500">上拉加载更多</text> -->
        </view>
        <view v-if="showBackTop">
          <view
            class="flash fixed right-20px size-36px flex items-center justify-center rounded-full bg-green-500 shadow-lg"
            @click="onRefresh()"
          >
            <uv-icon name="reload" color="#ffffff" size="18" />
          </view>
          <view
            class="fixed bottom-15vh right-20px size-36px flex items-center justify-center rounded-full bg-green-500 shadow-lg"
            :class="!showBackTop && 'disabled-grew'" @click="scrollToTop(showBackTop)"
          >
            <uv-icon name="arrow-up" color="#ffffff" size="18" />
          </view>
        </view>
      </uv-col>
    </uv-row>
  </view>
</template>

<style lang="scss" scoped>
.disabled-grew {
  background: #c7bdbd;
}
.flash {
  bottom: calc(46px + 15vh);
}
</style>
